<template>
  <el-dialog
    :title="fromList.productID?'产品编辑':'产品新增'"
    width="900px"
    @open="opens"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="Hidden"
    :visible.sync="TableListVisible"
  >
    <el-form :model="fromList" ref="list" label-width="150px">
      <el-form-item label="产品昵称">
        <el-input v-model="fromList.productName"></el-input>
      </el-form-item>
      <el-form-item label="产品类型">
        <el-radio-group v-model="fromList.productType">
          <el-radio :label="0">普通产品</el-radio>
          <el-radio :label="1">预售产品</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类">
        <el-cascader
          :options="tableMasterData"
          expand-trigger="hover"
          @change="classChange"
          :props="{ checkStrictly: true }"
          :value="[fromList.classID]"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="标题图">
        <x-upload
          :XAction="uploadUrl"
          :XHeader="uploadHeader"
          :compression="true"
          :XMaxImg="1"
          v-model="fromList.titleImg"
        ></x-upload>
      </el-form-item>
      <el-form-item label="详情图">
        <x-upload
          :XAction="uploadUrl"
          :XHeader="uploadHeader"
          :compression="true"
          :XMaxImg="5"
          v-model="fromList.media"
        ></x-upload>
      </el-form-item>
      <el-form-item label="主要说明">
        <vue-ueditor-wrap v-model="fromList.content" :config="myConfig"></vue-ueditor-wrap>
      </el-form-item>
      <el-form-item label="简介">
        <el-input
          :autosize="{ minRows: 9, maxRows: 7}"
          type="textarea"
          maxlength="100"
          show-word-limit
          style="width:100%"
          v-model="fromList.brief"
        ></el-input>
      </el-form-item>
      <el-form-item label="产品标签">
        <el-input
          :autosize="{ minRows: 3, maxRows: 2}"
          type="textarea"
          maxlength="100"
          show-word-limit
          style="width:100%"
          v-model="fromList.label"
        ></el-input>
      </el-form-item>
      <el-form-item label="销售价">
        <el-input style="width:30%" v-model="fromList.salePrice"></el-input>
        <span>提示:只填写数字。默认单位：元</span>
      </el-form-item>
      <el-form-item label="市场价">
        <el-input style="width:30%" v-model="fromList.marketPrice"></el-input>
        <span>提示:只填写数字。默认单位：元</span>
      </el-form-item>
      <el-form-item label="赠送豆子">
        <el-input style="width:30%" v-model="fromList.beans"></el-input>
        <span>提示:只填写数字。</span>
      </el-form-item>
      <el-form-item label="运费">
        <el-input style="width:30%" v-model="fromList.freight"></el-input>
        <span>提示:只填写数字。</span>
      </el-form-item>
      <el-form-item label="排序">
        <el-input style="width:30%" v-model="fromList.sort"></el-input>
        <span>提示:只填写数字。商品的顺序排名</span>
      </el-form-item>
      <el-form-item label="库存">
        <el-input style="width:30%" v-model="fromList.stock"></el-input>
        <span>提示:只填写数字。无默认单位</span>
      </el-form-item>
      <el-form-item label="结束时间">
        <div class="block">
          <el-date-picker
            v-model="fromList.expirationTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="状态" v-if="!fromList.productID">
        <el-radio-group v-model="fromList.status">
          <el-radio :label="0">下架</el-radio>
          <el-radio :label="1">上架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="Hidden()">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submit('editList')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from "axios";
import VueUeditorWrap from "vue-ueditor-wrap";
import config from "../../../../build/config";

export default {
  props: {
    TableListVisible: "",
    list: ""
  },
  data() {
    return {
      fromList: {
        media: []
      },
      uploadUrl: "",
      uploadHeader: {},
      tableMasterData: [],
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        serverUrl: config.baseUrl + "Ueditor/upload",
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/static/UEditor/"
      },
      /**
       * 多图上传
       */
      oldTitle: [],
      oldMedia: [],
      newMedia: [],
      imgFile: "",
      upNext: false,
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  methods: {
    /**
     * 图片上传
     */

    Hidden() {
      this.fromList = {};
      this.oldMedia = [];
      this.oldTitle = [];
      this.$emit("hidden");
    },
    opens() {
      this.fromList = JSON.parse(JSON.stringify(this.list));
      this.uploadHeader = { ApiAuth: sessionStorage.getItem("apiAuth") };
      this.uploadUrl = config.baseUrl + "Index/upload";
      this.getClassList();
    },
    classChange(arr) {
      this.fromList.classID = arr[arr.length - 1];
    },
    getClassList() {
      let vm = this;
      this.tableMasterData = [];
      var a = [];
      axios
        .post("MallClass/index", {
          page: 1,
          size: 10000
        })
        .then(function(response) {
          let res = response.data;
          if (res.code === 1) {
            for (let i = 0; i < res.data.list.length; i++) {
              vm.tableMasterData.push({
                value: res.data.list[i].classID,
                label: res.data.list[i].className,
                children: []
              });
              for (let j = 0; j < res.data.list[i].children.length; j++) {
                vm.tableMasterData[i].children.push({
                  value: res.data.list[i].children[j].classID,
                  label: res.data.list[i].children[j].className
                });
              }
            }
          } else {
            if (res.code === -14) {
              vm.$store.commit("logout", vm);
              vm.$router.push({
                name: "login"
              });
            } else {
              vm.$message({
                message: res.msg,
                type: "error",
                offset: 100
              });
            }
          }
        });
    },
    submit(formName) {
      let self = this;
      // self.$refs[formName].validate(valid => {
      //   if (valid) {
      if (this.fromList.classID) {
        this.fromList.masterID = 0;
        let obj = JSON.parse(JSON.stringify(this.fromList));
        if (typeof obj.media == "string") {
          delete obj.media;
          obj.media = JSON.parse(this.fromList.media);
        }
        axios.post("MallProduct/setProduct", obj).then(function(response) {
          if (response.data.code === 1) {
            self.$message({
              message: response.data.msg,
              type: "success",
              offset: 100
            });
            self.Hidden();
            self.$emit("getList");
          } else {
            self.$message({
              message: response.data.msg,
              type: "warning",
              offset: 100
            });
          }
        });
      } else {
        self.$message({
          message: "请确认分类是否存在",
          type: "warning",
          offset: 100
        });
      }

      //   } else {
      //     return false;
      //   }
      // });
    }
  }
};
</script>
<style scoped>
</style>
